<template>
  <div class="jump-xcx relative">
    <div class="jump-btn absolute" @click="jump">立即体验</div>
    <img class="absolute jump-xcxcode" src="@/assets/xcxCode.webp" alt="" />
  </div>
</template>

<script lang="ts" setup>
// import { onMounted } from "vue";
// import axios from "axios";
// import { setStorage, getStorage } from "@/utils/commom";
// const schemeKey = "cucXcxScheme";

// let xcxScheme = getStorage(schemeKey, 1000 * 60 * 60 * 24 * 28);

// onMounted(() => {
//   if (xcxScheme === null) {
//     // axios.get("/xcx/api/v1/code/generateScheme").then((res) => {
//     //   if (res.data.success) {
//     //     setStorage(schemeKey, res.data.data);
//     //     xcxScheme = res.data.data;
//     //   }
//     // });
//   }
// });

// const jump = () => {
//   if (xcxScheme !== null) {
//     location.href = xcxScheme;
//   } else {
//     alert("获取信息失败，请稍候刷新重试");
//   }
// };
</script>

<style scoped>
.jump-xcx {
  background-image: url("@/assets/jumpXcxBg.webp");
  @apply bg-cover;
  height: 1797px;
  /* @apply min-h-full; */
  padding-bottom: 50px;
}
.jump-btn {
  width: 370px;
  height: 90px;
  background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
  box-shadow: 0px 10px 6px 1px #feb79e,
    inset -1px 0px 10px 1px rgba(255, 255, 255, 0.63);
  border-radius: 97px;
  border: 1px solid #ffffff;
  top: 1206px;
  left: 190px;
  @apply font-normal;
  @apply text-center;
  line-height: 90px;
  font-size: 32px;
  color: #ffffff;
  /* transform: scale(1.2);
  opacity: 1; */
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0%,
  100% {
    transform: scale(1.1);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.jump-xcxcode {
  width: 282px;
  height: 282px;
  top: 1341px;
  left: 234px;
}
</style>
